<template>
  <div class="wrap-box">
    <div class="center-login">
      <div class="center-input">
          <el-form
            ref="login"
            :label-position="labelPosition"
            label-width="100px"
            :model="user"
            :rules="rules"
            style="max-width: 320px"
          >
            <el-form-item label="账号" prop="userName">
              <el-input type="text" v-model="user.userName" placeholder="请输入您的账号/用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input  v-model="user.pwd" type="password" placeholder="请输入您的密码" />
            </el-form-item>
            <el-form-item label="用户角色">
                <el-radio-group v-model="role">
                    <el-radio :label="0" size="large">管理员登录</el-radio>
                    <el-radio :label="1" size="large">普通用户登录</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="userLogin"
                  style='backgroundColor: rgba(10,15,30,0.5);
                  border-radius: 6px;
                  width: 240px'
                  >登录</el-button
                >
            </el-form-item>
          </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { userLogin, getAdminAuth, getAuth } from '../../api/user'

export default {
  name: 'LoginPage',
  data () {
    return {
      role: 0,
      user: {
        userName: '',
        pwd: ''
      },
      rules: {
        userName: [
          {
            required: true,
            message: '账户名必填',
            trigger: 'change'
          },
          {
            pattern: /[a-zA-Z]\w{1,7}/,
            message: '首字符必须是英文字母，2-8位'
          }
        ],
        pwd: [
          {
            required: true,
            message: '密码必填',
            trigger: 'change'
          },
          {
            pattern: /[a-zA-Z]\w{1,7}/,
            message: '首字符必须是英文字母，2-8位'
          }
        ]
      }
    }
  },
  methods: {
    userLogin () {
      this.$refs.login.validate().then(() => {
        userLogin(this.user).then(res => {
          if (res.data.code === 200) {
            // 缓存用户个人信息 用于 持久化
            const { token, role, userInfo } = res.data.data
            localStorage.setItem('token', token)
            localStorage.setItem('role', role)
            localStorage.setItem('userInfo', JSON.stringify(userInfo))

            this.$store.commit('user/INIT_USER', res.data.data)
            if (this.role == 0) {
            getAdminAuth().then(res => {
              if (res.data.code === 200) {
                const { authMenus, authRoutes } = res.data.data
                localStorage.setItem('authMenus', JSON.stringify(authMenus))
                localStorage.setItem('authRoutes', JSON.stringify(authRoutes))
                this.$store.commit('user/INIT_MENUS', authMenus)
                this.$store.commit('user/ADD_AUTH_ROUTES', authRoutes)
                this.$message({
                  type: 'success',
                  message: res.data.msg,
                  duration: 2000,
                  onClose: () => {
                    this.$router.replace('/dashBoard')
                  }
                })
              }
            })
            }else {
              // 普通用户接口
              getAuth().then(res => {
                if (res.data.code === 200) {
                  const { authMenus, authRoutes } = res.data.data
                  // 立即缓存 持久化
                  localStorage.setItem('authMenus', JSON.stringify(authMenus))
                  localStorage.setItem('authRoutes', JSON.stringify(authRoutes))
                  // 将authMenus 存储到vuex
                  this.$store.commit('user/INIT_MENUS', authMenus)
                  // 动态添加路由
                  this.$store.commit('user/ADD_AUTH_ROUTES', authRoutes)
                  // 弹出成功提示 跳转到 /dashBoard
                  this.$message({
                    type: 'success',
                    message: res.data.msg,
                    duration: 2000,
                    onClose: () => {
                      this.$router.replace('/dashBoard')
                    }
                  })
                }
              })
            }
          }
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '表单验证失败'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap-box{
  width: 100vw;
  height: 100vh;
  background: url('../../assets/imgs/loginPic.png') no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  .center-login{
    width: 360px;
    height: 280px;
    margin: 0 auto;
    background-color: rgba(23,47,83,0.5);
    border-radius: 12px;
    .center-input{
      padding-top: 42px;
      box-sizing: border-box;
    }
  }
}
.el-input__wrapper{
      --el-text-color-regular: none;;
      background-color: rgba(23,47,83,0.5);
      border-radius: 4px;
      height: 25px;
    }

    :deep .el-form-item__label {
      color:whitesmoke
    }

    :deep .el-radio__label {
      color:whitesmoke
    }
</style>
